import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile'

import { Link } from 'react-router-dom'

import NavHeader from '../../components/NavHeader'
// 导入withFormik
import { withFormik, Form, Field, ErrorMessage } from 'formik'

// 导入Yup
import * as Yup from 'yup'

import styles from './index.module.css'

// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

class Registe extends Component {
  render() {
    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>注册</NavHeader>
        <WhiteSpace size="xl" />
        <WingBlank>
          <Form>
            <div className={styles.formItem}>
              {/* <label className={styles.label}>用户名</label> */}
              {/* <input className={styles.input} placeholder="请输入账号" /> */}
              <Field
                className={styles.input}
                name="username"
                placeholder="请输入账号"
              />
            </div>
            <ErrorMessage
              className={styles.error}
              name="username"
              component="div"
            />
            <div className={styles.formItem}>
              {/* <label className={styles.label}>密码</label>
              <input
                className={styles.input}
                type="password"
                placeholder="请输入密码"
              /> */}
              <Field
                className={styles.input}
                name="password"
                type="password"
                placeholder="请输入密码"
              />
            </div>
            <ErrorMessage
              className={styles.error}
              name="password"
              component="div"
            />
            <div className={styles.formItem}>
              {/* <label className={styles.label}>重复密码</label>
              <input
                className={styles.input}
                type="password"
                placeholder="请重新输入密码"
              /> */}
              <Field
                className={styles.input}
                name="repeatpassword"
                type="password"
                placeholder="请重新输入密码"
              />
            </div>
            <ErrorMessage
              className={styles.error}
              name="repeatpassword"
              component="div"
            />
            <div className={styles.formSubmit}>
              <button className={styles.submit} type="submit">
                注册
              </button>
            </div>
          </Form>
          <Flex className={styles.backHome} justify="between">
            <Link to="/home">点我回首页</Link>
            <Link to="/login">已有账号，去登录</Link>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}

Registe = withFormik({
  // 提供状态：
  mapPropsToValues: () => ({ username: '', password: '', repeatpassword: '' }),
  // 添加表单校验规则
  validationSchema: Yup.object().shape({
    username: Yup.string()
      .required('账号为必填项')
      .matches(REG_UNAME, '长度为5到8位，只能出现数字、字母、下划线'),
    password: Yup.string()
      .required('密码为必填项')
      .matches(REG_PWD, '长度为5到12位，只能出现数字、字母、下划线'),
    repeatpassword: Yup.string()
      .required('重复密码为必填项')
      // .matches(REG_PWD, '两次输入密码不相同'),
      /* .test(
        (value) => {
          console.log(value,this.parent.password);
          return ["两次输入密码不相同"]
        },
      ) */
  }),
  // 表单的提交事件
  handleSubmit: async (values, { props }) => {
    console.log('props: ',  Yup.string().test);
    // 获取账号和密码
    const { username, password } = values;

    // console.log('表单提交了', username, password);
    // 发送请求
    const res = await React.Component.prototype.$axios("post", '/user/registered', {
      username,
      password
    });

    const { status, description } = res;

    if (status === 200) {
      Toast.success(description, 1, null, false);
      // 注册成功
      // localStorage.setItem('hkzf_token', body.token);

      /* 
        1 登录成功后，判断是否需要跳转到用户想要访问的页面（判断 props.location.state 是否有值）。
        2 如果不需要（没有值），则直接调用 history.go(-1) 返回上一页。
        3 如果需要，就跳转到 from.pathname 指定的页面（推荐使用 replace 方法模式，而不是 push）。
      */
      if (!props.location.state) {
        // 此时，表示是直接进入到了该页面，直接调用 go(-1) 即可
        props.history.go(-1);
        // props.history.replace("/home/profile");
      } else {
        // push：[home, login, map]
        // replace: [home, map]
        props.history.replace(props.location.state.from.pathname);
      }
      // 注意：无法在该方法中，通过 this 来获取到路由信息
      // 所以，需要通过 第二个对象参数中获取到 props 来使用 props
      // props.history.go(-1)
    } else {
      // 创建失败
      Toast.info(description, 2, null, false);
    }
  }
})(Registe)

export default Registe
